<template>
	<view class="ranking-page">
		<a-list
		    class="list-demo-action-layout"
		    :bordered="false"
		    :data="List"
		  >
		    <template #item="{ item }">
		      <a-list-item class="list-demo-item" action-layout="vertical">
		        <template #actions>
		          <span style="color: red;font-size: 16px;font-weight: bold;" ><icon-heart />{{ item.voteNum }}</span>
		        </template>
		        <template #extra>
		          <view className="image-area">
					  <a-carousel
					      :style="{
					        width: '100%',
					        height: '100%',
					      }"
						show-arrow="never"
					  	:autoPlay="true"
					    >
					      <a-carousel-item v-for="image in item.imageList">
					        <image :src="image" style="width: 100%;height: 100%;" mode="aspectFit"></image>
					      </a-carousel-item>
					    </a-carousel>
		          </view>
		        </template>
		        <a-list-item-meta
		          :title="item.player"
		          :description="item.title"
		        >
		        </a-list-item-meta>
		      </a-list-item>
		    </template>
		  </a-list>
	</view>
</template>

<script setup>
	
	
	import { ref } from 'vue';
import VoteApi from '@/VoteApi';
	
	const List = ref([])
	
	
	// const names = ['Socrates', 'Balzac', 'Plato'];
	// const avatarSrc = [
	//   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
	//   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
	//   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp',
	// ];
	// const imageSrc = [
	//   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',
	//   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp',
	//   '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp',
	// ];
	
	const dataSource = [{
		index: 1,
		avatar: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
		title: 'Socrates',
		description:
		  'Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).',
		imageSrc: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp',
	}]
	
	
	
	
	const ListData = () => {
		const UUID = uni.getStorageSync('UUID')
		VoteApi.List(UUID).then(resp => {
			List.value = resp.data.List.sort( (a,b) => { 
				return Number(b.voteNum) - Number(a.voteNum) 
			} )
			
			console.info(List.value )
		})
		
	}
	
	ListData()
	
</script>

<style scoped lang="scss">
	.ranking-page{
		padding: 24px;
		
		.list-demo-action-layout .image-area {
		  width: 120px;
		  height: 60px;
		  overflow: hidden;
		}
		
		.list-demo-action-layout .list-demo-item {
		  padding: 20px 0;
		  border-bottom: 1px solid var(--color-fill-3);
		}
		
		.list-demo-action-layout .image-area img {
		  width: 100%;
		}
		
		.list-demo-action-layout .arco-list-item-action .arco-icon {
		  margin: 0 4px;
		}
	}

</style>
